<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>GraphIDE an Graphical IDE for nth-graph development</title>
		<script src="viewer/raphael/raphael.js" type="text/javascript" charset="utf-8">
		</script>
		<script src="viewer/jquery/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8">
		</script>
		<script src="viewer/graphspace.js" type="text/javascript" charset="utf-8">
		</script>
		<script language="JavaScript" type="text/javascript">
			
			window.onload = function(){
				
				$.getJSON("example/first_graph.gs.json", function(json){
					var graph_paper1 = Raphael("bok_canvas", 200, 170);
					graph_paper1.rect(0, 0, 200, 170).attr("fill", "#fdfdf5");
					var bridges_of_kronegsberg = json;
					var gr1 = new GraphRenderer({"graph":bridges_of_kronegsberg}, graph_paper1);
					gr1.renderGraph();
				});

				$.getJSON("example/influence_diagram.gs.json", function(json){
					var graph_paper2 = Raphael("canvas", 800, 650);
					graph_paper2.rect(0, 0, 800, 650).attr("fill", "#fdfdf5");
					var influence_diagram = json;
					var gr2 = new GraphRenderer({"graph":influence_diagram}, graph_paper2);
					gr2.renderGraph();
				});
				
			}

		</script>
	</head>
	<body>
		<div style="margin-left: auto; margin-right: auto; width:810px;">
		<h1>GraphIDE</h1>
		<p><strong>GraphIDE</strong> is an IDE for the <a href="http://code.google.com/p/nth-graph/">nth-graph</a> programming scheme.
		Code is drawn, as opposed to written, by placing nodes (of some shape) on screen and connecting them with arcs or arrows,
		making the relationships between nodes plainly visible.
		</p>
		<p> The goal of the graphIDE project is to support viewing, editing, and debugging of nth-graphs.  Some early experiments of displaying graphs (using raphaeljs) are shown below.
		</p>
		<h2>The First Graph</h2>
		<div id="bok_canvas">
		</div>
		<p>Eulers First graph was a schematic map of the land and bridges of Kroneberg.</p>
		<h2>Influential Projects</h2> 
		<p>These projects implement some sort of visual programming language.  To some degree they have inspired nth-graphs's research and design over several years. </p>
		<div id="canvas">
		</div>
		<p>The above graph of influential projects is displayed with a GraphIDE viewer using the <a href="http://www.raphaeljs.com">Raphael javascript library</a>.</p>
		</div>
	</body>
</html>

